<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-row>
      <el-col :span="24">
        <el-form
          ref="queryForm"
          :inline="true"
          :model="form"
          label-width="auto"
        >
          <el-form-item label="地区:" prop="areaId">
            <CascaderSelect
              v-model="form.areaId"
              :values="form.areaId"
              requestMethod="get"
              varient="areaDept"
              :propOptions="areaProps"
              size="small"
              placeholder="请选择地区"
            ></CascaderSelect>
          </el-form-item>
          <el-form-item label="年份:" prop="">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="请选择年份"
              size="small"
              :value-format="'yyyy'"
              :picker-options="pickeroOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getInfo"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">
              重置
            </el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="small"
              @click="handleExport"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col v-if="info.budgetDeclareVos.length > 0" :span="12">
        <el-descriptions direction="vertical" :column="2" border>
          <el-descriptions-item label="合计部门">
            {{ info.organizationCounts }}家
          </el-descriptions-item>
          <el-descriptions-item label="合计费用">
            {{ info.budgetFund | numDealfilters }}元
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <!-- v-if="info.budgetDeclareVos.length > 0" -->
    <el-table
      class="mt10"
      :data="info.budgetDeclareVos"
      ref="excelTable"
      height="650"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="sysDeptName"
        label="申报单位"
        minWidth="150"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="budgetFund"
        label="汇总（元）"
        minWidth="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.budgetFund | numDealfilters }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="基本信息" align="center">
        <el-table-column
          prop="budgetFund"
          label="申请用能预算经费（元）"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="year"
          label="用能预算利用时间"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contact"
          label="联系人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactNumber"
          label="联系电话"
          width="120"
          align="center"
        >
        </el-table-column>
      </el-table-column> -->
      <el-table-column
        v-for="(item, index) in titleList"
        :key="index"
        :label="item.titleName"
        align="center"
      >
        <el-table-column
          v-for="(it, idx) in item.subTitleNames"
          :key="idx"
          :prop="'a' + idx"
          :label="
            item.isUseStandard == 1 && idx == 0
              ? it
              : it + `（${item.energyUnit}）`
          "
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :class="
                Number(item[`val${scope.$index}`][idx]) > 0 ? 'red' : 'green'
              "
              >{{ item[`val${scope.$index}`][idx] }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- <div v-else>
      <span>暂无数据</span>
    </div> -->
  </lb-layout>
</template>

<script>
import { exportExcel } from "@/utils/xlsx";
import { dynamicTitle, detail } from "@/api/statistics/budgetDeclaration.js";
import CascaderSelect from "@/components/Select/CascaderSelect";
import { dealElectricity } from "@/utils";
export default {
  filters: {
    numDealfilters(num) {
      if (num) {
        return dealElectricity(num, 1, 2);
      } else {
        return "";
      }
    },
  },
  name: "budgetDeclarationDetail",
  components: {
    CascaderSelect,
  },
  data() {
    return {
      areaProps: {
        value: "id",
        children: "children",
        label: "label",
        checkStrictly: true,
        expandTrigger: "hover",
      },
      pickeroOptions: {
        disabledDate(time) {
          let date = new Date();
          return time.getFullYear() > date.getFullYear();
        },
      },
      form: {
        areaId: "",
        year: "",
      },
      // 遮罩层
      loading: true,
      titleList: [],
      info: {
        budgetDeclareVos: [],
      },
    };
  },
  mounted() {
    // this.areaId = this.$route.query.areaId;
    // this.year = this.$route.query.year;
    this.getFormreset();
    this.getInfo();
  },
  methods: {
    handleExport() {
      if (this.info.budgetDeclareVos.length <= 0) {
        this.$message.warning("无内容导出,请确认!");
        return false;
      }
      let fileName =
        this.info.areaName + "-" + this.info.year + "年预算申报统计";
      let cols = [{ wpx: 240 }];
      exportExcel(this.$refs.excelTable, fileName, cols);
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.form = {
        areaId: "",
        year: "",
      };
      this.resetForm("queryForm");
      this.getFormreset();
      this.getInfo();
    },
    getFormreset() {
      this.form.areaId = "";
      let now = new Date().getFullYear();
      this.form.year = String(now);
    },
    async getInfo() {
      const that = this;
      that.info = {
        budgetDeclareVos: [],
      };
      that.titleList = [];
      const data = {
        areaId: this.form.areaId[this.form.areaId.length - 1],
        year: this.form.year,
      };
      this.loading = true;
      await dynamicTitle(data).then((res) => {
        if (res.code === 700) {
          that.$message.warning(res.msg);
          return false;
        }
        let arr = res.data;
        that.titleList = arr;
        detail(data).then((info) => {
          this.loading = false;
          if (info.code === 700) {
            that.$message.warning(info.msg);
            return false;
          }
          if (info.data) {
            that.info = { ...that.info, ...info.data };
            that.info.budgetDeclareVos = that.info.budgetDeclareVos.map(
              (item, index) => {
                item.typeConfigItemRecordValues.map((it, i) => {
                  arr.map((a, s) => {
                    a[`val${index}`] = item.typeConfigItemRecordValues.splice(
                      0,
                      a.subTitleNames.length
                    );
                  });
                  // item["a" + s] = it;
                  return it;
                });
                return item;
              }
            );
            that.titleList = arr;
          } else {
            that.info = {
              budgetDeclareVos: [],
            };
          }
        });
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep
  .el-descriptions--medium:not(.is-bordered)
  .el-descriptions-item__cell {
  padding-bottom: 0 !important;
}
.red {
  color: #ed5565;
}
.green {
  color: #10b767;
}
.head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;
  .title {
    font-size: 28px;
    font-weight: 400;
  }
  .el-tag {
    margin-left: 20px;
  }
  .el-button {
    position: absolute;
    right: 0px;
  }
}
::v-deep .el-descriptions-item__cell {
  text-align: center !important;
}
</style>
